<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>产品列表</span>
</div>
	<el-tabs v-model="activeName2" type="card" >
		<el-tab-pane name="first">
			<span slot="label"><i class="el-icon-date"></i> 正在出售的产品({{firstCount}})</span>
			<plist v-bind:state="1" 
			v-on:reload="reload"
			v-bind:tlist="tlist"
			v-bind:clist="clist"
			v-bind:count.sync="firstCount" v-bind:refresh="t1"/>
		</el-tab-pane>
		<el-tab-pane name="second">
			<span slot="label"><i class="el-icon-date"></i> 仓库中的产品({{secondCount}})</span>
			<plist v-bind:state="2" 
			v-on:reload="reload"
			v-bind:tlist="tlist"
			v-bind:clist="clist"
			v-bind:count.sync="secondCount" v-bind:refresh="t2"/>
		</el-tab-pane>
	</el-tabs>
</el-card>
</div>
  		
</template>

<script>

import { mapGetters } from 'vuex';
import plist from './children/list';

export default {
	name: 'productlist',
	data () {
		return {
		  	firstCount : 0,
		  	secondCount : 0,
		  	t1 : 0,
		  	t2 : 0,
		}
	},

	components: {
		plist,
	},

	computed : {
		...mapGetters([
			'typeList',
			'columnList',
		]),

		activeName2 : {
			get () {
				if(this.$route.query.opt == 'create'){
					this.t2 = (new Date()).getTime();
				}
				return this.$route.query.opt == 'create' ? 'second' : 'first';
			},

			set (newValue) {
				return newValue;
			}
		},

		tlist () {
			this.typeList.unshift({ type_name : '未设置类别', type_code: '0' });
			return this.typeList;
		},

		clist () {
			this.columnList.unshift({ column_name : '未设置栏目', column_code: '0' });
			return this.columnList;
		},
	},

	methods : {
		reload () {
			console.log('reload');
			this.t1 = (new Date()).getTime();
			this.t2 = (new Date()).getTime();
		}
	},

	watch:{
	    
	},

	mounted () {
		this.$store.dispatch('getTypeList');
		this.$store.dispatch('getColumnList');
	},

}
</script>

<style scoped>

</style>
